<!DOCTYPE html>
<head><meta charset="utf-8"><title>調參工具</title>
<script src="http://libs.useso.com/js/zepto/1.1.3/zepto.min.js"></script>
</head>
<body>
<div id="wrapper">
	<div id="adjusters"></div>
	<div id="previewpane">
		<h1><img src="logo.png">調參工具</h1>
		<canvas id="preview" width="1500" height="1600"></canvas>
	</div>
</div>
<style>
	#wrapper {
		display: flex;
	}
	#adjusters {
		flex: none;
		padding-right: 1em
	}
	#adjusters ol {
		list-style: none;
		padding: 0;
		margin: 0 0 1em 0;
	}
	#adjusters ol li {
		display: flex;
		font-size: smaller;
	}
	#adjusters ol li span {
		display: inline-block;
		flex: 1;
		padding: 0.2em;
		padding-right: 1em;
	}
	#adjusters ol li input {
		display: inline-block;
		flex: none;
		border: 1px solid #ddd;
		padding: 0.2em;
	}
	#adjusters ol li.text input {
		flex: 3;
	}
	#adjusters > div {
		max-width: 30em;
	}
	#previewpane {
		flex: none;
	}
	#preview {
		width:750px;
		height:800px;
		border: 1px solid #ddd;
	}
</style>
<script src="index.packed.js"></script>
</body>